<template>
	<!-- 待激活用户 -->
	<view class="jihuos">
		<scroll-view class="grace-scroll-y" scroll-y="true" :style="{height:height}" @scrolltolower="activate()">
			<view class="yhs" v-for="(item,index) in awaits" :key="index">
				<view class="leves">
					<view style="font-size: 30rpx;color: rgba(68, 68, 68, 1);">{{item.name}}</view>
					<view style="font-size: 22rpx;color:RGBA(110, 110, 110, 1);margin: 0 55rpx;">{{item.level.name}}</view>
				</view>
				<view class="leves">
					<view style="font-size: 22rpx;color: rgba(86, 86, 86, 1);">{{item.phone}}</view>
					<view style="font-size: 22rpx;color:RGBA(110, 110, 110, 1);margin: 0 55rpx;">{{item.create_time}}</view>
				</view>
				<view style="border-bottom: 1rpx solid rgba(204, 204, 204, 1);width: 702rpx;margin-top: 30rpx;margin-left: 25rpx;"></view>
				<!-- 亲推 -->
				<view style="display: flex;justify-content: space-between;margin: 0 25rpx;">
				<view class="str">有效用户：{{item.youxiao}}</view>
				<view class="str">直推人数：{{item.zhitui}}</view>
				<view class="str">间推人数：{{item.jiantui}}</view>
				</view>
			</view>
			<view style="color: rgba(68, 68, 68, 1);text-align: center;margin-top: 20rpx;margin-bottom: 20rpx;">没有更多了</view>
		</scroll-view>

		<!-- 拨号弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="tabkt" v-show="xians_2">
				<view class="tabk_1" style="margin-bottom: 20rpx;">
					<text style="font-size: 28rpx;line-height: 70rpx;">选择拨打号码</text>
					<image @tap="close" src="../../static/quxiao.png" mode="" style="width: 40rpx;height: 40rpx;transform: translate(130rpx,10rpx);"></image>
				</view>
				<view class="tabk_2" v-for="(item1,index1) in call" :key="index1">
					<view style="font-size: 24rpx;transform: translateY(15rpx);">{{item1.show_str}}</view>
					<view style="transform: translateY(30rpx);">{{item1.tel}}</view>
					<image src="../../static/bohao.png" mode="" style="width: 40rpx;height: 40rpx;transform: translate(220rpx,-30rpx);"
					 @tap="yhhaoma(item1.tel)"></image>
				</view>
			</view>
			<view class="tabk" v-show="xians">
				<view class="tabk_1" style="margin-bottom: 20rpx;">
					<text style="font-size: 28rpx;line-height: 70rpx;">选择拨打号码</text>
					<image @tap="close" src="../../static/quxiao.png" mode="" style="width: 40rpx;height: 40rpx;transform: translate(130rpx,10rpx);"></image>
				</view>
				<view class="tabk_2" v-for="(item1,index1) in call" :key="index1">
					<view style="font-size: 24rpx;transform: translateY(15rpx);">{{item1.show_str}}</view>
					<view style="transform: translateY(30rpx);">{{item1.tel}}</view>
					<image src="../../static/bohao.png" mode="" style="width: 40rpx;height: 40rpx;transform: translate(220rpx,-30rpx);"
					 @tap="yhhaoma(item1.tel)"></image>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				page: 0,
				size: 10,
				awaits: [], //user数组,
				tag: 0,
				xians: false,
				xians_1: false,
				xians_2: false,
				str: '',
				call: [],
				show_str: '',
				types: '' // 类型
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.types = opt.type
		},
		onShow() {
			var sysinfo = uni.getSystemInfoSync();
			this.height = (sysinfo.safeArea.height - 20) + 'px';
			this.activate()
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 获取活跃用户数据列表
			activate() {
				var vm = this
				vm.page = vm.page + 1;
				vm.myPost(
					'api/myprofit/get_user_list', {
						type: vm.types,
						page: vm.page,
						size: vm.size
					},
					function(res) {
						console.log(res.data.data);
						if (res.code == 200) {
							vm.awaits = res.data.data
							// for (let i = 0; i < await_list.length; i++) {
							// 	vm.awaits.push(await_list[i])
							// 	var strd = await_list[i].str
							// 	vm.str = strd.toString()
							// 	vm.call = await_list[i].call
							// }
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
						

					}
				)
			},
			// 标记
			tasg(id, bj, index) {
				var vm = this
				vm.req.post(
					vm.lochost + '/index/index?method=click_tag', {
						uid: id,
						type: 1,
						tag: bj
					}, {},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							var awaits = vm.awaits
							vm.req.each(awaits, function(i, v) {
								if (index == i) {
									if (v.user.tag == res.data.tag) {
										v.user.tag = res.data.tag;
									} else {
										v.user.tag = res.data.tag;
									}
									awaits[i] = v;
								}
							})
							vm.awaits = awaits
						}

					}
				)

				// var awaits = this.awaits
				// this.req.each(awaits,function(i,v){
				// 	if(index==i){
				// 		if(v.user.tag==1){
				// 			v.user.tag=0;
				// 		}else{
				// 			v.user.tag=1;
				// 		}
				// 		awaits[i]=v;
				// 	}
				// })
				// this.awaits = awaits
			},
			// 拨号弹框
			baohao(index) {
				// console.log(index);
				// var awaits = this.awaits;
				// this.call = awaits[index].call;
				// console.log(awaits[index].call)
				console.log(index);
				var awaits = this.awaits;
				this.call = awaits[index].call;
				console.log(awaits[index].call)
				if (this.call.length == 2) {
					this.xians = true
					this.xians_1 = false
					this.xians_2 = false
				} else if (this.call.length == 3) {
					this.xians = false
					this.xians_1 = true
					this.xians_2 = false
				} else {
					this.xians = false
					this.xians_1 = false
					this.xians_2 = true
				}
				this.$refs.popup.open()
			},
			// 隐藏拨号弹框
			close() {
				this.$refs.popup.close()
			},
			// 拨打用户号码
			yhhaoma(phone) {
				console.log(phone);
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			}
		},
		components: {
			uniPopup
		}
	}
</script>

<style>
	.yhs {
		width: 750rpx;
		height: 160rpx;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;
	}

	.leves {
		display: flex;
		justify-content: space-between;
		transform: translateY(15rpx);
		margin: 0 24rpx;
	}

	.biaoji image {
		position: absolute;
		/* top: 120rpx; */
		left: 690rpx;
		width: 40rpx;
		height: 40rpx;
		margin-top: -60rpx;
	}

	.biaojis {
		position: absolute;
		left: 690rpx;
		margin-top: -15rpx;
		font-size: 22rpx;
	}

	.str {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.bohao {
		margin-top: 30rpx;
		text-align: center;
	}

	.yijian {
		font-size: 35rpx;
		color: rgba(80, 160, 254, 1);
	}

	.tabk {
		width: 540rpx;
		height: 351rpx;
		background-color: rgba(243, 243, 243, 1);
		border-radius: 16rpx;
	}

	.tabks {
		width: 540rpx;
		height: 481rpx;
		background-color: rgba(243, 243, 243, 1);
		border-radius: 16rpx;
	}

	.tabkt {
		width: 540rpx;
		height: 221rpx;
		background-color: rgba(243, 243, 243, 1);
		border-radius: 16rpx;
	}

	.tabk_1 {
		width: 540rpx;
		height: 70rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
		text-align: center;
		/* transform: translateY(10rpx) */
	}

	.tabk_2 {
		margin-top: 23rpx;
		width: 540rpx;
		height: 110rpx;
		background-color: #FFFFFF;
		text-align: center;
		/* transform: translateY(-60rpx); */
	}

	.tabk_3 {
		margin-top: 20rpx;
		width: 540rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		text-align: center;
		border-radius: 0 0 16rpx 16rpx;
	}
</style>
